<template>
  <div class="energy-storage-dashboard">
    <!-- 全屏控制按钮 -->
    <div class="fullscreen-control">
      <el-button 
        type="primary" 
        circle
        @click="returnBack"
        class="fullscreen-btn"

      >
        返回
      </el-button>
    </div>

    <!-- 顶部标题栏 -->
    <div class="dashboard-header">
<!--      <div class="header-right">-->
<!--        <div class="datetime-display">-->
<!--          <span class="date">{{ currentDate }}</span>-->
<!--          <span class="time">{{ currentTime }}</span>-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <!-- 主要内容区域 -->
    <div class="dashboard-content">
      <!-- 左侧：储能资源监控 -->
      <div class="left-panel">
        <!-- 储能资源监控表格 -->
        <div class="panel-card energy-storage-table">
          <div class="card-header">
            <el-icon><Monitor /></el-icon>
            <h3>储能资源监控</h3>
          </div>
          <div class="table-container" ref="tableContainer">
            <div class="table-scroll" ref="tableScroll">
              <table class="storage-table">
                <thead>
                  <tr>
                    <th>车名</th>
                    <th>位置</th>
                    <th>容量</th>
                    <th>可充电量</th>
                    <th>可放电量</th>
                    <th>可充功率</th>
                    <th>可放功率</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in storageTableData" :key="index">
                    <td>{{ item.name }}</td>
                    <td>{{ item.location }}</td>
                    <td>{{ item.capacity }}</td>
                    <td>{{ item.chargeable }}</td>
                    <td>{{ item.dischargeable }}</td>
                    <td>{{ item.chargePower }}</td>
                    <td>{{ item.dischargePower }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间：地图展示 -->
      <div class="center-panel">
        <!-- 地图展示区 - 作为主视觉区域 -->
        <div class="panel-card map-display main-visual-area">
          <div class="card-header">
            <el-icon><Location /></el-icon>
            <h3>地理分布图</h3>
          </div>
          <div class="map-container">
            <china
              v-model:area-code="mapAreaCode"
              v-model:area-level="mapAreaLevel"
              v-model:area-name="mapAreaName"
              v-model:map-name-list="mapNameList"
              v-model:map-code-list="mapCodeList"
              :area-statistic="mapAreaStatistic"
            />
          </div>
        </div>

        <!-- 核心操作区 - 自适应底部区域 -->
        <div class="panel-card core-operations scrollable-section">
          <div class="card-header">
            <el-icon><Operation /></el-icon>
            <h3>核心操作</h3>
          </div>
          <div class="section-content" ref="coreOperationsContent">
            <div class="operations-grid">
              <div class="operation-item" @click="handleOperation('monitor')">
                <div class="operation-icon"><el-icon><VideoPlay /></el-icon></div>
                <div class="operation-text">实时监控</div>
              </div>
              <div class="operation-item" @click="handleOperation('control')">
                <div class="operation-icon"><el-icon><SwitchButton /></el-icon></div>
                <div class="operation-text">智能调控</div>
              </div>
              <div class="operation-item" @click="handleOperation('analyze')">
                <div class="operation-icon"><el-icon><DataAnalysis /></el-icon></div>
                <div class="operation-text">数据分析</div>
              </div>
              <div class="operation-item" @click="handleOperation('alarm')">
                <div class="operation-icon"><el-icon><Warning /></el-icon></div>
                <div class="operation-text">告警管理</div>
              </div>
              
              <!-- 额外操作项，用于演示滚动功能 -->
              <div class="operation-item" @click="handleOperation('report')">
                <div class="operation-icon"><el-icon><Document /></el-icon></div>
                <div class="operation-text">报表管理</div>
              </div>
              <div class="operation-item" @click="handleOperation('settings')">
                <div class="operation-icon"><el-icon><Setting /></el-icon></div>
                <div class="operation-text">系统设置</div>
              </div>
              <div class="operation-item" @click="handleOperation('help')">
                <div class="operation-icon"><el-icon><QuestionFilled /></el-icon></div>
                <div class="operation-text">帮助中心</div>
              </div>
              <div class="operation-item" @click="handleOperation('logout')">
                <div class="operation-icon"><el-icon><SwitchButton /></el-icon></div>
                <div class="operation-text">退出系统</div>
              </div>
            </div>
          </div>
          <div class="scroll-indicator" @click="scrollToBottom('coreOperationsContent')" v-if="showCoreOperationsScroll">
            <el-icon><ArrowDown /></el-icon>
          </div>
        </div>
      </div>
      <!-- 右侧：电力现货市场分析 -->
      <div class="right-panel">
        <!-- 电量趋势图表 -->
        <div class="panel-card electricity-trend">
          <div class="card-header">
            <el-icon><TrendCharts /></el-icon>
            <h3>电量趋势</h3>
            <div class="time-filter">
              <el-segmented v-model="electricityTimeFilter" :options="electricityTimeOptions" />
            </div>
          </div>
          <div ref="electricityChart" class="chart-container"></div>
        </div>

        <!-- 功率曲线图表 -->
        <div class="panel-card power-curve">
          <div class="card-header">
            <el-icon><DataAnalysis /></el-icon>
            <h3>功率曲线</h3>
          </div>
          <div ref="powerChart" class="chart-container"></div>
        </div>

        <!-- 告警管理表格 -->
        <div class="panel-card alarm-management">
          <div class="card-header">
            <el-icon><Warning /></el-icon>
            <h3>告警管理</h3>
          </div>
          <div class="table-container" ref="alarmTableContainer">
            <div class="table-scroll" ref="alarmTableScroll">
              <table class="alarm-table">
                <thead>
                <tr>
                  <th>车名</th>
                  <th>告警</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in alarmData" :key="index">
                  <td>{{ item.vehicleName }}</td>
                  <td>{{ item.alarm }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>


    </div>
</template>

<script setup lang="ts">
import {
  DataAnalysis,
  TrendCharts,
  Histogram,
  Monitor,
  FullScreen,
  Close,
  PieChart,
  Avatar,
  Location,
  Operation,
  VideoPlay,
  SwitchButton,
  Warning,
  Coin,
  Switch,
  TopRight,
  Top,
  ArrowDown,
  Document,
  Setting,
  QuestionFilled
} from '@element-plus/icons-vue'
import { useRouter} from "vue-router";
import { onMounted, onUnmounted, ref, reactive, computed, watch } from 'vue'
import China from "@/views/station-mangement/map/components/china.vue";
import screenfull from 'screenfull'
import * as echarts from 'echarts'
import BaiduMap from '@/components/BaiduMap/index.vue'

// 全屏状态
const isFullscreen = ref(false)
const router = useRouter()
// 时间维度选择
const timeDimension = ref('月')
const timeOptions = [
  { label: '月', value: '月' },
  { label: '年', value: '年' },
  { label: '累计', value: '累计' }
]

// 当前时间显示
const currentDate = ref('')
const currentTime = ref('')
const currentCity = ref('北京市')
const currentCoordinates = ref('116.4074°E, 39.9042°N')

// 图表实例
const revenueChart = ref<HTMLElement | null>(null)
const priceChart = ref<HTMLElement | null>(null)
const supplyChart = ref<HTMLElement | null>(null)
const electricityChart = ref<HTMLElement | null>(null)
const powerChart = ref<HTMLElement | null>(null)

let revenueChartInstance: echarts.ECharts | null = null
let priceChartInstance: echarts.ECharts | null = null
let supplyChartInstance: echarts.ECharts | null = null
let electricityChartInstance: echarts.ECharts | null = null
let powerChartInstance: echarts.ECharts | null = null
let mapChartInstance: echarts.ECharts | null = null
let debouncedResize: (() => void) | null = null

// 表格滚动相关
const tableContainer = ref<HTMLElement | null>(null)
const tableScroll = ref<HTMLElement | null>(null)
let scrollInterval: NodeJS.Timeout | null = null

// 告警表格滚动相关
const alarmTableContainer = ref<HTMLElement | null>(null)
const alarmTableScroll = ref<HTMLElement | null>(null)
let alarmScrollInterval: NodeJS.Timeout | null = null

// 电量趋势时间筛选
const electricityTimeFilter = ref('月')
const electricityTimeOptions = [
  { label: '年', value: '年' },
  { label: '月', value: '月' },
  { label: '日', value: '日' },
  { label: '总', value: '总' }
]


// Mock数据
const energyStorageData = reactive({
  stationCount: 17,
  totalMW: 106.8,
  totalMWh: 214.0,
  types: [
    { name: '储能小车1', count: 6, capacity: '35.2/70.4' },
    { name: '储能小车2', count: 5, capacity: '28.5/57.0' },
    { name: '储能小车3', count: 6, capacity: '43.1/86.6' }
  ]
})

// 储能资源监控表格数据
const storageTableData = ref([
  { name: '储能小车A001', location: '北京储能站A区', capacity: '2.5MWh', chargeable: '1.8MWh', dischargeable: '2.1MWh', chargePower: '1.2MW', dischargePower: '1.5MW' },
  { name: '储能小车A002', location: '北京储能站A区', capacity: '2.5MWh', chargeable: '2.0MWh', dischargeable: '1.9MWh', chargePower: '1.2MW', dischargePower: '1.5MW' },
  { name: '储能小车A003', location: '北京储能站A区', capacity: '2.5MWh', chargeable: '1.5MWh', dischargeable: '2.3MWh', chargePower: '1.2MW', dischargePower: '1.5MW' },
  { name: '储能小车B001', location: '上海储能站B区', capacity: '3.2MWh', chargeable: '2.8MWh', dischargeable: '2.9MWh', chargePower: '1.6MW', dischargePower: '2.0MW' },
  { name: '储能小车B002', location: '上海储能站B区', capacity: '3.2MWh', chargeable: '2.5MWh', dischargeable: '3.0MWh', chargePower: '1.6MW', dischargePower: '2.0MW' },
  { name: '储能小车B003', location: '上海储能站B区', capacity: '3.2MWh', chargeable: '3.0MWh', dischargeable: '2.7MWh', chargePower: '1.6MW', dischargePower: '2.0MW' },
  { name: '储能小车C001', location: '广州储能站C区', capacity: '4.1MWh', chargeable: '3.5MWh', dischargeable: '3.8MWh', chargePower: '2.0MW', dischargePower: '2.5MW' },
  { name: '储能小车C002', location: '广州储能站C区', capacity: '4.1MWh', chargeable: '3.8MWh', dischargeable: '3.6MWh', chargePower: '2.0MW', dischargePower: '2.5MW' },
  { name: '储能小车C003', location: '广州储能站C区', capacity: '4.1MWh', chargeable: '3.2MWh', dischargeable: '4.0MWh', chargePower: '2.0MW', dischargePower: '2.5MW' },
  { name: '储能小车D001', location: '深圳储能站D区', capacity: '2.8MWh', chargeable: '2.2MWh', dischargeable: '2.5MWh', chargePower: '1.4MW', dischargePower: '1.8MW' },
  { name: '储能小车D002', location: '深圳储能站D区', capacity: '2.8MWh', chargeable: '2.5MWh', dischargeable: '2.3MWh', chargePower: '1.4MW', dischargePower: '1.8MW' },
  { name: '储能小车D003', location: '深圳储能站D区', capacity: '2.8MWh', chargeable: '2.1MWh', dischargeable: '2.7MWh', chargePower: '1.4MW', dischargePower: '1.8MW' },
  { name: '储能小车E001', location: '杭州储能站E区', capacity: '1.9MWh', chargeable: '1.4MWh', dischargeable: '1.6MWh', chargePower: '1.0MW', dischargePower: '1.2MW' },
  { name: '储能小车E002', location: '杭州储能站E区', capacity: '1.9MWh', chargeable: '1.6MWh', dischargeable: '1.5MWh', chargePower: '1.0MW', dischargePower: '1.2MW' },
  { name: '储能小车E003', location: '杭州储能站E区', capacity: '1.9MWh', chargeable: '1.3MWh', dischargeable: '1.8MWh', chargePower: '1.0MW', dischargePower: '1.2MW' },
  { name: '储能小车F001', location: '南京储能站F区', capacity: '2.2MWh', chargeable: '1.8MWh', dischargeable: '1.9MWh', chargePower: '1.1MW', dischargePower: '1.4MW' },
  { name: '储能小车F002', location: '南京储能站F区', capacity: '2.2MWh', chargeable: '1.9MWh', dischargeable: '1.8MWh', chargePower: '1.1MW', dischargePower: '1.4MW' },
  { name: '储能小车F003', location: '南京储能站F区', capacity: '2.2MWh', chargeable: '1.7MWh', dischargeable: '2.1MWh', chargePower: '1.1MW', dischargePower: '1.4MW' }
])

// 储能站位置信息数据
const stationData = [
  { name: '北京储能站', value: [116.4074, 39.9042, 15.2], capacity: '30.4 MW/60.8 MWh', type: '磷酸铁锂', city: '北京市' },
  { name: '上海储能站', value: [121.4737, 31.2304, 12.8], capacity: '25.6 MW/51.2 MWh', type: '三元锂', city: '上海市' },
  { name: '广州储能站', value: [113.2644, 23.1291, 18.5], capacity: '37.0 MW/74.0 MWh', type: '磷酸铁锂', city: '广州市' },
  { name: '深圳储能站', value: [114.0579, 22.5431, 14.3], capacity: '28.6 MW/57.2 MWh', type: '磷酸铁锂', city: '深圳市' },
  { name: '杭州储能站', value: [120.1551, 30.2741, 9.7], capacity: '19.4 MW/38.8 MWh', type: '铅炭电池', city: '杭州市' },
  { name: '南京储能站', value: [118.7969, 32.0603, 11.2], capacity: '22.4 MW/44.8 MWh', type: '磷酸铁锂', city: '南京市' },
  { name: '武汉储能站', value: [114.3055, 30.5928, 13.6], capacity: '27.2 MW/54.4 MWh', type: '三元锂', city: '武汉市' },
  { name: '成都储能站', value: [104.0665, 30.5723, 16.8], capacity: '33.6 MW/67.2 MWh', type: '磷酸铁锂', city: '成都市' },
  { name: '西安储能站', value: [108.9402, 34.3416, 10.5], capacity: '21.0 MW/42.0 MWh', type: '铅炭电池', city: '西安市' },
  { name: '重庆储能站', value: [106.5516, 29.5630, 15.9], capacity: '31.8 MW/63.6 MWh', type: '磷酸铁锂', city: '重庆市' }
]



const marketData = reactive({
  dayAheadPrice: 485.6,
  realTimePrice: 512.3,
  biddingSpace: 2340,
  totalDays: 365,
  participationDays: 278,
  participationRate: 76.2
})

const evaluationData = [
  { type: '卓越收益型', count: 8, capacity: '52.1 MW/104.2 MWh', className: 'excellent', icon: 'Top' },
  { type: '稳健收益型', count: 6, capacity: '38.4 MW/76.8 MWh', className: 'steady', icon: 'Histogram' },
  { type: '收益改进型', count: 3, capacity: '16.3 MW/32.6 MWh', className: 'improvement', icon: 'TopRight' }
]

// 告警数据
const alarmData = ref([
  { vehicleName: '储能小车A001', alarm: '温度过高告警' },
  { vehicleName: '储能小车A002', alarm: '电量不足告警' },
  { vehicleName: '储能小车A003', alarm: '充电异常告警' },
  { vehicleName: '储能小车B001', alarm: '功率异常告警' },
  { vehicleName: '储能小车B002', alarm: '通讯中断告警' },
  { vehicleName: '储能小车B003', alarm: '电压异常告警' },
  { vehicleName: '储能小车C001', alarm: '温度过高告警' },
  { vehicleName: '储能小车C002', alarm: '系统故障告警' },
  { vehicleName: '储能小车C003', alarm: '电量不足告警' },
  { vehicleName: '储能小车D001', alarm: '充电异常告警' },
  { vehicleName: '储能小车D002', alarm: '功率异常告警' },
  { vehicleName: '储能小车D003', alarm: '通讯中断告警' },
  { vehicleName: '储能小车E001', alarm: '电压异常告警' },
  { vehicleName: '储能小车E002', alarm: '温度过高告警' },
  { vehicleName: '储能小车E003', alarm: '系统故障告警' },
  { vehicleName: '储能小车F001', alarm: '电量不足告警' },
  { vehicleName: '储能小车F002', alarm: '充电异常告警' },
  { vehicleName: '储能小车F003', alarm: '功率异常告警' }
])

// 电量趋势数据
const electricityTrendData = {
  '年': {
    xAxis: ['2020', '2021', '2022', '2023', '2024'],
    generation: [1200, 1350, 1480, 1620, 1750],
    charging: [800, 920, 1050, 1180, 1320]
  },
  '月': {
    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    generation: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
    charging: [80, 88, 67, 89, 60, 153, 140, 121, 127, 156, 193, 220]
  },
  '日': {
    xAxis: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
    generation: [45, 52, 78, 95, 88, 72, 48],
    charging: [32, 38, 55, 68, 62, 51, 34]
  },
  '总': {
    xAxis: ['总发电量', '总充电量'],
    generation: [8400],
    charging: [5600]
  }
}

// 功率曲线数据
const powerCurveData = {
  xAxis: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  power: [2.1, 1.8, 3.2, 4.5, 4.1, 3.6, 2.3]
}

// 地图数据
const mapAreaCode = ref('000000000000')
const mapAreaLevel = ref(0)
const mapAreaName = ref('china')
const mapNameList = ref<string[]>([])
const mapCodeList = ref<string[]>([])
const mapAreaStatistic = ref([])

// 滚动相关
const showCoreOperationsScroll = ref(false)
const coreOperationsContent = ref<HTMLElement | null>(null)

// 运营成效评价折叠状态
const isEvaluationCollapsed = ref(false)

// 切换运营成效评价折叠状态
const toggleEvaluation = () => {
  isEvaluationCollapsed.value = !isEvaluationCollapsed.value
}

// 切换全屏
const toggleFullscreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle().then(() => {
      isFullscreen.value = screenfull.isFullscreen
    }).catch((err) => {
      console.error('Error toggling fullscreen:', err)
    })
  }
}
const returnBack = ()=>{

  router.push("/monitorManagement/operationMonitoring")
}
// 更新时间显示
const updateDateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 初始化收入趋势图表
const initRevenueChart = () => {
  if (!revenueChart.value) return

  revenueChartInstance = echarts.init(revenueChart.value)
  const isSmallScreen = window.innerWidth < 768
  const isMediumScreen = window.innerWidth < 1200
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: isSmallScreen ? '8%' : '5%',
      right: isSmallScreen ? '5%' : '4%',
      bottom: isSmallScreen ? '10%' : '8%',
      top: isMediumScreen ? '20%' : '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { 
        color: '#fff',
        fontSize: isSmallScreen ? 10 : (isMediumScreen ? 11 : 12),
        rotate: isSmallScreen ? 45 : 0
      }
    },
    yAxis: {
      type: 'value',
      name: '收入(万元)',
      nameTextStyle: { 
        color: '#fff',
        fontSize: isSmallScreen ? 10 : 12
      },
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { 
        color: '#fff',
        fontSize: isSmallScreen ? 9 : 11
      },
      splitLine: { lineStyle: { color: 'rgba(79, 149, 255, 0.2)' } }
    },
    series: [{
      name: '运营收入',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
      smooth: true,
      lineStyle: { 
        color: '#4F95FF', 
        width: isSmallScreen ? 2 : 3 
      },
      areaStyle: { color: 'rgba(79, 149, 255, 0.3)' },
      symbol: 'circle',
      symbolSize: isSmallScreen ? 4 : 6
    }]
  }
  revenueChartInstance.setOption(option)
}

// 初始化地图（使用散点图模拟地图效果）

// 初始化价格趋势图表
const initPriceChart = () => {
  if (!priceChart.value) return

  priceChartInstance = echarts.init(priceChart.value)
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      name: '价格(元/MWh)',
      nameTextStyle: { color: '#fff' },
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(79, 149, 255, 0.2)' } }
    },
    series: [
      {
        name: '日前价格',
        type: 'line',
        data: [450, 480, 520, 580, 620, 540, 480],
        lineStyle: { color: '#67C23A', width: 2 },
        symbol: 'circle',
        symbolSize: 4
      },
      {
        name: '实时价格',
        type: 'line',
        data: [460, 490, 535, 595, 635, 555, 490],
        lineStyle: { color: '#E6A23C', width: 2 },
        symbol: 'circle',
        symbolSize: 4
      }
    ],
    legend: {
      data: ['日前价格', '实时价格'],
      textStyle: { color: '#fff' },
      top: 10
    }
  }
  priceChartInstance.setOption(option)
}

// 初始化供应趋势图表
const initSupplyChart = () => {
  if (!supplyChart.value) return

  supplyChartInstance = echarts.init(supplyChart.value)
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['新能源', '水电', '抽蓄', '省间联络线', '纯调峰'],
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      name: '供应(MW)',
      nameTextStyle: { color: '#fff' },
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(79, 149, 255, 0.2)' } }
    },
    series: [{
      name: '供应趋势',
      type: 'bar',
      data: [1200, 800, 600, 400, 300],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4F95FF' },
          { offset: 1, color: 'rgba(79, 149, 255, 0.3)' }
        ])
      },
      barWidth: '60%'
    }]
  }
  supplyChartInstance.setOption(option)
}

// 初始化电量趋势图表
const initElectricityChart = () => {
  if (!electricityChart.value) {
    console.log('Electricity chart container not found')
    return
  }

  try {
    electricityChartInstance = echarts.init(electricityChart.value)
    const currentData = electricityTrendData[electricityTimeFilter.value]
    
    const option = {
      backgroundColor: 'transparent',
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: currentData.xAxis,
        axisLine: { lineStyle: { color: '#4F95FF' } },
        axisLabel: { color: '#fff' }
      },
      yAxis: {
        type: 'value',
        name: '电量(MWh)',
        nameTextStyle: { color: '#fff' },
        axisLine: { lineStyle: { color: '#4F95FF' } },
        axisLabel: { color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(79, 149, 255, 0.2)' } }
      },
      series: [
        {
          name: '发电量',
          type: 'line',
          data: currentData.generation,
          lineStyle: { color: '#67C23A', width: 2 },
          areaStyle: { color: 'rgba(103, 194, 58, 0.3)' },
          symbol: 'circle',
          symbolSize: 4
        },
        {
          name: '充电量',
          type: 'line',
          data: currentData.charging,
          lineStyle: { color: '#E6A23C', width: 2 },
          areaStyle: { color: 'rgba(230, 162, 60, 0.3)' },
          symbol: 'circle',
          symbolSize: 4
        }
      ],
      legend: {
        data: ['发电量', '充电量'],
        textStyle: { color: '#fff' },
        top: 10
      }
    }
    electricityChartInstance.setOption(option)
    console.log('Electricity chart initialized successfully')
  } catch (error) {
    console.error('Error initializing electricity chart:', error)
  }
}

// 初始化功率曲线图表
const initPowerChart = () => {
  if (!powerChart.value) {
    console.log('Power chart container not found')
    return
  }

  try {
    powerChartInstance = echarts.init(powerChart.value)
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: powerCurveData.xAxis,
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      name: '功率(MW)',
      nameTextStyle: { color: '#fff' },
      axisLine: { lineStyle: { color: '#4F95FF' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(79, 149, 255, 0.2)' } }
    },
    series: [{
      name: '功率',
      type: 'line',
      data: powerCurveData.power,
      smooth: true,
      lineStyle: { 
        color: '#4F95FF', 
        width: 3 
      },
      areaStyle: { 
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(79, 149, 255, 0.5)' },
          { offset: 1, color: 'rgba(79, 149, 255, 0.1)' }
        ])
      },
      symbol: 'circle',
      symbolSize: 6
    }],
    legend: {
      data: ['功率'],
      textStyle: { color: '#fff' },
      top: 10
    }
  }
    powerChartInstance.setOption(option)
    console.log('Power chart initialized successfully')
  } catch (error) {
    console.error('Error initializing power chart:', error)
  }
}

// 告警表格自动滚动功能
const startAlarmTableAutoScroll = () => {
  if (alarmScrollInterval) {
    clearInterval(alarmScrollInterval)
  }
  
  alarmScrollInterval = setInterval(() => {
    if (alarmTableScroll.value) {
      const { scrollTop, scrollHeight, clientHeight } = alarmTableScroll.value
      
      // 如果滚动到底部，回到顶部
      if (scrollTop + clientHeight >= scrollHeight - 5) {
        alarmTableScroll.value.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      } else {
        // 继续向下滚动
        alarmTableScroll.value.scrollBy({
          top: 1,
          behavior: 'smooth'
        })
      }
    }
  }, 100) // 每100ms滚动1px
}

const stopAlarmTableAutoScroll = () => {
  if (alarmScrollInterval) {
    clearInterval(alarmScrollInterval)
    alarmScrollInterval = null
  }
}

// 更新当前位置信息
const updateCurrentLocation = (station: any) => {
  currentCity.value = station.city
  currentCoordinates.value = `${station.value[0].toFixed(4)}°E, ${station.value[1].toFixed(4)}°N`
}

// 百度地图事件处理
const onMapMarkerClick = (marker: any) => {
  updateCurrentLocation({
    city: marker.city,
    value: marker.position
  })
}

const onMapCityChange = (city: string) => {
  currentCity.value = city
}

// 操作处理
const handleOperation = (type: string) => {
  console.log(`执行操作: ${type}`)
  // 这里可以添加具体的操作逻辑
}

// 表格自动滚动功能
const startTableAutoScroll = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
  
  scrollInterval = setInterval(() => {
    if (tableScroll.value) {
      const { scrollTop, scrollHeight, clientHeight } = tableScroll.value
      
      // 如果滚动到底部，回到顶部
      if (scrollTop + clientHeight >= scrollHeight - 5) {
        tableScroll.value.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      } else {
        // 继续向下滚动
        tableScroll.value.scrollBy({
          top: 1,
          behavior: 'smooth'
        })
      }
    }
  }, 100) // 每100ms滚动1px
}

const stopTableAutoScroll = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
    scrollInterval = null
  }
}

// 滚动功能
const scrollToBottom = (refName: string) => {
  const element = refName === 'coreOperationsContent' ? coreOperationsContent.value : null
  if (element) {
    element.scrollTo({
      top: element.scrollHeight,
      behavior: 'smooth'
    })
  }
}

const checkScrollNeed = () => {
  if (coreOperationsContent.value) {
    const { scrollHeight, clientHeight } = coreOperationsContent.value
    showCoreOperationsScroll.value = scrollHeight > clientHeight + 10
  }
}

// 监听电量趋势时间筛选变化
watch(electricityTimeFilter, (newValue) => {
  if (electricityChartInstance) {
    const currentData = electricityTrendData[newValue]
    const option = {
      xAxis: {
        data: currentData.xAxis
      },
      series: [
        {
          name: '发电量',
          data: currentData.generation
        },
        {
          name: '充电量',
          data: currentData.charging
        }
      ]
    }
    electricityChartInstance.setOption(option)
  }
})

// 响应式处理
const handleResize = () => {
  // 重新初始化图表以适应新的屏幕尺寸
  if (revenueChartInstance) {
    revenueChartInstance.resize()
    initRevenueChart() // 重新初始化以应用新的配置
  }
  if (priceChartInstance) {
    priceChartInstance.resize()
    initPriceChart() // 重新初始化以应用新的配置
  }
  if (supplyChartInstance) {
    supplyChartInstance.resize()
    initSupplyChart() // 重新初始化以应用新的配置
  }
  if (electricityChartInstance) {
    electricityChartInstance.resize()
  }
  if (powerChartInstance) {
    powerChartInstance.resize()
  }
}

onMounted(() => {
  // 更新时间
  updateDateTime()
  setInterval(updateDateTime, 1000)

  // 延迟初始化图表，确保DOM完全渲染
  setTimeout(() => {
    initRevenueChart()
    initPriceChart()
    initSupplyChart()
  }, 100)

  // 延迟初始化右侧图表，确保DOM完全渲染
  setTimeout(() => {
    initElectricityChart()
    initPowerChart()
  }, 500)

  // 监听窗口大小变化，使用防抖优化性能
  let resizeTimer: NodeJS.Timeout | null = null
  debouncedResize = () => {
    if (resizeTimer) clearTimeout(resizeTimer)
    resizeTimer = setTimeout(() => {
      handleResize()
    }, 250)
  }
  
  window.addEventListener('resize', debouncedResize!)
  
  // 检查是否需要滚动
  setTimeout(() => {
    checkScrollNeed()
  }, 500)

  // 启动表格自动滚动
  setTimeout(() => {
    startTableAutoScroll()
    startAlarmTableAutoScroll()
  }, 2000)

  // 自动进入全屏
  setTimeout(() => {
    if (screenfull.isEnabled) {
      // screenfull.request()
    }
  }, 1000)

})

onUnmounted(() => {
  // 清理所有事件监听器
  if (debouncedResize) {
    window.removeEventListener('resize', debouncedResize)
  }

  // 销毁图表实例
  revenueChartInstance?.dispose()
  priceChartInstance?.dispose()
  supplyChartInstance?.dispose()
  electricityChartInstance?.dispose()
  powerChartInstance?.dispose()

  // 停止表格自动滚动
  stopTableAutoScroll()
  stopAlarmTableAutoScroll()

})
</script>

<style lang="scss" scoped>
.energy-storage-dashboard {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/fullScreen/整体背景.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #ffffff;
  overflow: hidden;
  position: relative;
  font-size: clamp(12px, 1.2vh, 16px);
}

// 全屏控制按钮
.fullscreen-control {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;

  .fullscreen-btn {
    background: rgba(79, 149, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(79, 149, 255, 0.3);
    color: #ffffff;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(79, 149, 255, 0.3);
      transform: scale(1.1);
    }
  }
}

// 顶部标题栏
.dashboard-header {
  background-image: url("@/assets/fullScreen/顶部全景大厅@2x.png");
  background-size: 100%;
  min-height: clamp(60px, 8vh, 80px);

  .header-left {
    .main-title {
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      font-weight: bold;
      margin: 0;
      background: linear-gradient(45deg, #4F95FF, #67C23A);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
    }

    .subtitle {
      font-size: clamp(0.8rem, 1.5vw, 1.2rem);
      margin: clamp(2px, 0.5vh, 5px) 0 0 0;
      opacity: 0.8;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.3;
    }
  }

  .header-right {
    .datetime-display {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .date {
        font-size: clamp(0.9rem, 1.3vw, 1.1rem);
        font-weight: 500;
        color: #4F95FF;
      }

      .time {
        font-size: clamp(1rem, 2vw, 1.5rem);
        font-weight: bold;
        color: #67C23A;
        font-family: 'Courier New', monospace;
      }
    }
  }
}

// 主要内容区域
.dashboard-content {
  display: flex;
  height: calc(100vh - clamp(60px, 12vh, 120px));
  padding: clamp(5px, 1vh, 10px);
  gap: clamp(5px, 1vh, 10px);
  min-height: 0;

  .left-panel,
  .right-panel {
    width: clamp(280px, 25vw, 400px);
    display: flex;
    flex-direction: column;
    padding: clamp(5px, 1vh, 10px);
    gap: clamp(8px, 1.5vh, 15px);
    min-width: 0;
    max-height: 100%;
    overflow: hidden;
    
    // 确保关键内容区域始终可见
    .revenue-trend,
    .market-participation {
      flex-shrink: 0; // 防止被压缩
      min-height: clamp(200px, 25vh, 300px); // 确保最小高度
    }
    
    .performance-evaluation {
      flex: 1; // 可折叠区域自适应
      min-height: clamp(100px, 15vh, 200px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    // 响应式设计：小屏幕上自动调整宽度
    @media (max-width: 1200px) {
      width: clamp(250px, 22vw, 350px);
    }
    
    @media (max-width: 768px) {
      width: clamp(200px, 20vw, 300px);
    }
    
    // 超小屏幕：垂直堆叠
    @media (max-width: 480px) {
      width: 100%;
      max-height: 50vh; // 增加移动设备上的最大高度
      
      .revenue-trend,
      .market-participation {
        min-height: clamp(180px, 20vh, 250px);
      }
    }
  }

  .center-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(5px, 1vh, 10px);
    gap: clamp(8px, 1.5vh, 15px);
    min-width: 0;
    max-height: 100%;
    overflow: hidden;
    
    // 自适应布局：地图占据主要空间，其他内容可滚动
    .main-visual-area {
      flex-shrink: 0; // 防止地图被压缩
    }
    
    .scrollable-section {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      
      .section-content {
        flex: 1;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(79, 149, 255, 0.5) transparent;
        
        &::-webkit-scrollbar {
          width: 6px;
        }
        
        &::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.1);
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: rgba(79, 149, 255, 0.5);
          border-radius: 3px;
          
          &:hover {
            background: rgba(79, 149, 255, 0.7);
          }
        }
      }
      
      .scroll-indicator {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 30px;
        background: rgba(79, 149, 255, 0.3);
        border: 1px solid rgba(79, 149, 255, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
        
        &:hover {
          background: rgba(79, 149, 255, 0.5);
          transform: translateX(-50%) scale(1.1);
        }
        
        .el-icon {
          color: #4F95FF;
          font-size: 16px;
        }
      }
    }
  }
}

// 地图展示区样式
.map-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  
  &.main-visual-area {
    flex: 2; // 让地图区域占据更多空间
    min-height: 60vh; // 确保地图有足够的高度
    
    .card-header {
      margin-bottom: clamp(15px, 2vh, 25px);
      
      h3 {
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
        font-weight: bold;
      }
    }
  }
  
  .map-container {
    flex: 1;
    position: relative;
    min-height: 600px; // 增加最小高度
    max-height: 70vh; // 限制最大高度防止过度拉伸
    border-radius: clamp(8px, 1.5vh, 12px);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(79, 149, 255, 0.3);
    box-shadow: 0 4px 20px rgba(79, 149, 255, 0.2);
    
    // 确保地图组件充满容器
    > * {
      width: 100%;
      height: 100%;
    }
  }
}

// 面板卡片样式
.panel-card {
  background: rgba(79, 149, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(79, 149, 255, 0.2);
  border-radius: clamp(8px, 1.5vh, 12px);
  padding: clamp(12px, 2vh, 20px);
  transition: all 0.3s ease;
  flex-shrink: 0;
  min-height: 0;

  &:hover {
    border-color: rgba(79, 149, 255, 0.4);
    box-shadow: 0 8px 32px rgba(79, 149, 255, 0.2);
  }

  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: clamp(10px, 1.5vh, 20px);
    padding-bottom: clamp(8px, 1vh, 10px);
    border-bottom: 1px solid rgba(79, 149, 255, 0.2);
    min-height: 0;

    .el-icon {
      font-size: clamp(18px, 2.5vh, 24px);
      color: #4F95FF;
      margin-right: clamp(8px, 1vw, 10px);
      flex-shrink: 0;
    }

    h3 {
      margin: 0;
      font-size: clamp(1rem, 1.8vh, 1.3rem);
      color: #ffffff;
      flex: 1;
      line-height: 1.2;
    }
  }
}

// 储能资源概览
.resource-overview {
  flex: 0 0 auto;
  
  .overview-stats {
    display: flex;
    justify-content: space-between;
    gap: clamp(4px, 1vw, 10px);
    flex-wrap: wrap;

    .stat-item {
      text-align: center;
      padding: clamp(8px, 1.5vh, 15px);
      background: rgba(79, 149, 255, 0.1);
      border-radius: clamp(6px, 1vh, 8px);
      flex: 1;
      min-width: clamp(80px, 15vw, 120px);

      .stat-value {
        font-size: clamp(1.2rem, 2.5vw, 2rem);
        font-weight: bold;
        color: #4F95FF;
        margin-bottom: clamp(2px, 0.5vh, 5px);
        line-height: 1.2;
      }

      .stat-label {
        font-size: clamp(0.7rem, 1.2vw, 0.9rem);
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.2;
      }
    }
  }
}

// 储能类型分布
.type-distribution {
  .type-list {
    .type-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(79, 149, 255, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .type-info {
        .type-name {
          font-size: 1.1rem;
          color: #ffffff;
          display: block;
        }

        .type-count {
          font-size: 0.9rem;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      .type-capacity {
        text-align: right;

        .capacity-value {
          font-size: 1.2rem;
          font-weight: bold;
          color: #67C23A;
          display: block;
        }

        .capacity-unit {
          font-size: 0.8rem;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
  }
}

// 运营收入趋势
.revenue-trend {
  flex-shrink: 0; // 防止被压缩，确保始终可见
  min-height: clamp(220px, 28vh, 350px); // 确保最小高度
  
  .time-selector {
    margin-left: auto;
    
    .el-segmented {
      background: rgba(79, 149, 255, 0.1);
      border: 1px solid rgba(79, 149, 255, 0.3);
      
      .el-segmented-item {
        color: rgba(255, 255, 255, 0.8);
        
        &.is-active {
          background: rgba(79, 149, 255, 0.3);
          color: #ffffff;
        }
      }
    }
  }
}

// 图表容器
.chart-container {
  height: clamp(120px, 20vh, 250px);
  width: 100%;
  min-height: clamp(100px, 15vh, 200px);
  max-height: clamp(180px, 25vh, 300px);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(79, 149, 255, 0.2);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

// 运营成效评价
.performance-evaluation {
  .card-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    
    &:hover {
      background: rgba(79, 149, 255, 0.1);
      border-radius: 4px;
    }
    
    .collapse-icon {
      margin-left: auto;
      transition: transform 0.3s ease;
      font-size: 16px;
      color: #4F95FF;
      
      &.is-collapsed {
        transform: rotate(-90deg);
      }
    }
  }
  
  .evaluation-content {
    transition: all 0.3s ease;
    overflow: hidden;
  }
  
  &.collapsed {
    .card-header {
      margin-bottom: 0;
      border-bottom: none;
    }
  }
  
  .evaluation-list {
    .evaluation-item {
      display: flex;
      align-items: center;
      padding: 15px;
      margin-bottom: 10px;
      border-radius: 8px;

      &.excellent {
        background: linear-gradient(135deg, rgba(103, 194, 58, 0.2), rgba(103, 194, 58, 0.1));
        border: 1px solid rgba(103, 194, 58, 0.3);
      }

      &.steady {
        background: linear-gradient(135deg, rgba(79, 149, 255, 0.2), rgba(79, 149, 255, 0.1));
        border: 1px solid rgba(79, 149, 255, 0.3);
      }

      &.improvement {
        background: linear-gradient(135deg, rgba(230, 162, 60, 0.2), rgba(230, 162, 60, 0.1));
        border: 1px solid rgba(230, 162, 60, 0.3);
      }

      .evaluation-icon {
        font-size: 32px;
        margin-right: 15px;
        color: #ffffff;
      }

      .evaluation-info {
        flex: 1;

        .evaluation-type {
          font-size: 1.1rem;
          font-weight: bold;
          color: #ffffff;
          margin-bottom: 5px;
        }

        .evaluation-count {
          font-size: 1.5rem;
          color: #67C23A;
          margin-bottom: 3px;
        }

        .evaluation-capacity {
          font-size: 0.9rem;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}

// 地图容器
.map-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: clamp(200px, 35vh, 500px);
  
  .card-header {
    background: linear-gradient(135deg, rgba(0, 10, 20, 0.9), rgba(15, 28, 46, 0.8));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: clamp(8px, 1.5vh, 12px) clamp(8px, 1.5vh, 12px) 0 0;
    
    h3 {
      color: #00ffff;
      text-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
    }
    
    .el-icon {
      color: #00ffff;
      filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.6));
    }
  }
  
  .map-chart {
    flex: 1;
    min-height: clamp(150px, 25vh, 400px);
    background: linear-gradient(135deg, #0a1429 0%, #1a2332 100%);
    border-radius: 0 0 clamp(8px, 1.5vh, 12px) clamp(8px, 1.5vh, 12px);
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  }
}

// 核心操作区 - 增强响应式设计
.core-operations {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  
  .section-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px; // 为滚动条预留空间
  }
  
  .operations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(10px, 1.5vh, 20px);
    padding: clamp(8px, 1vh, 15px);
    
    // 响应式布局调整
    @media (max-width: 1200px) {
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: clamp(8px, 1vh, 15px);
    }
    
    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(6px, 0.8vh, 12px);
    }
    
    @media (max-width: 480px) {
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(5px, 0.5vh, 10px);
    }
  }
  
  .operation-item {
    background: rgba(79, 149, 255, 0.15);
    border: 1px solid rgba(79, 149, 255, 0.3);
    border-radius: clamp(8px, 1.5vh, 12px);
    padding: clamp(12px, 2vh, 20px);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1vh, 12px);
    min-height: clamp(80px, 12vh, 120px);
    
    &:hover {
      background: rgba(79, 149, 255, 0.25);
      border-color: rgba(79, 149, 255, 0.6);
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(79, 149, 255, 0.3);
    }
    
    &:active {
      transform: translateY(0);
    }
    
    .operation-icon {
      font-size: clamp(24px, 4vw, 36px);
      color: #4F95FF;
      margin-bottom: clamp(4px, 0.5vh, 8px);
      
      .el-icon {
        font-size: inherit;
      }
    }
    
    .operation-text {
      font-size: clamp(12px, 1.5vw, 16px);
      font-weight: 500;
      color: #ffffff;
      line-height: 1.3;
    }
  }
  
  // 滚动指示器位置调整
  .scroll-indicator {
    bottom: 15px;
    right: 15px;
    left: auto;
    transform: none;
    
    &:hover {
      transform: scale(1.1);
    }
  }
}

// 市场数据展示
.market-overview {
  .market-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .market-item {
      text-align: center;
      flex: 1;
      padding: 10px;
      
      .market-label {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 5px;
      }
      
      .market-value {
        font-size: 1.3rem;
        font-weight: bold;
        
        &.price-1 {
          color: #67C23A;
        }
        
        &.price-2 {
          color: #E6A23C;
        }
      }
    }
  }
}

// 市场参与成效
.market-participation {
  flex-shrink: 0; // 防止被压缩，确保始终可见
  min-height: clamp(180px, 22vh, 280px); // 确保最小高度
  
  .participation-stats {
    display: flex;
    justify-content: space-between;
    
    .participation-item {
      text-align: center;
      flex: 1;
      padding: 15px;
      background: rgba(79, 149, 255, 0.1);
      border-radius: 8px;
      margin: 0 5px;
      
      .participation-value {
        font-size: clamp(1.5rem, 2.5vw, 2rem); // 响应式字体大小
        font-weight: bold;
        color: #4F95FF;
        margin-bottom: 5px;
      }
      
      .participation-label {
        font-size: clamp(0.8rem, 1.2vw, 0.9rem); // 响应式字体大小
        color: rgba(255, 255, 255, 0.8);
      }
    }
    
    // 小屏幕下的响应式布局
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 8px;
      
      .participation-item {
        margin: 0;
        padding: 12px;
      }
    }
  }
}

// 储能资源监控表格样式
.energy-storage-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  
  .table-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(79, 149, 255, 0.2);
  }
  
  .table-scroll {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(79, 149, 255, 0.5) transparent;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(79, 149, 255, 0.5);
      border-radius: 3px;
      
      &:hover {
        background: rgba(79, 149, 255, 0.7);
      }
    }
  }
  
  .storage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    
    thead {
      position: sticky;
      top: 0;
      z-index: 10;
      background: linear-gradient(135deg, rgba(79, 149, 255, 0.3), rgba(79, 149, 255, 0.2));
      backdrop-filter: blur(10px);
      
      th {
        padding: clamp(8px, 1vh, 12px) clamp(4px, 0.8vw, 8px);
        text-align: center;
        font-weight: 600;
        color: #ffffff;
        border-bottom: 2px solid rgba(79, 149, 255, 0.4);
        white-space: nowrap;
        text-shadow: 0 0 5px rgba(79, 149, 255, 0.5);
      }
    }
    
    tbody {
      tr {
        border-bottom: 1px solid rgba(79, 149, 255, 0.1);
        transition: all 0.3s ease;
        
        &:nth-child(even) {
          background: rgba(79, 149, 255, 0.05);
        }
        
        &:hover {
          background: rgba(79, 149, 255, 0.15);
          transform: translateX(2px);
        }
        
        td {
          padding: clamp(6px, 0.8vh, 10px) clamp(4px, 0.8vw, 8px);
          text-align: center;
          color: rgba(255, 255, 255, 0.9);
          border-right: 1px solid rgba(79, 149, 255, 0.1);
          
          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
  
  // 响应式设计
  @media (max-width: 1200px) {
    .storage-table {
      font-size: clamp(0.7rem, 1vw, 0.85rem);
      
      th, td {
        padding: clamp(6px, 0.8vh, 10px) clamp(3px, 0.6vw, 6px);
      }
    }
  }
  
  @media (max-width: 768px) {
    .storage-table {
      font-size: clamp(0.65rem, 1.2vw, 0.8rem);
      
      th, td {
        padding: clamp(5px, 0.7vh, 8px) clamp(2px, 0.5vw, 4px);
      }
    }
  }
}

// 响应式设计
@media (max-width: 2560px) {
  .energy-storage-dashboard {
    font-size: clamp(14px, 1.1vh, 18px);
  }
  
  .dashboard-content {
    .left-panel,
    .right-panel {
      .revenue-trend,
      .market-participation {
        min-height: clamp(210px, 26vh, 320px);
      }
    }
  }
}

@media (max-width: 1920px) {
  .dashboard-content {
    .left-panel,
    .right-panel {
      width: clamp(300px, 20vw, 350px);
    }
  }
}

@media (max-width: 1600px) {
  .dashboard-content {
    .left-panel,
    .right-panel {
      width: clamp(250px, 18vw, 300px);
    }
  }
  
  .dashboard-header {
    padding: clamp(8px, 1.5vh, 15px) clamp(15px, 2vw, 30px);
    min-height: clamp(50px, 10vh, 100px);
  }
}

@media (max-width: 1366px) {
  .dashboard-content {
    .left-panel,
    .right-panel {
      width: clamp(220px, 16vw, 280px);
    }
  }
  
  .core-operations .operations-grid {
    grid-template-columns: 1fr;
    gap: clamp(8px, 1vh, 12px);
  }
}

@media (max-width: 1200px) {
  .dashboard-content {
    flex-direction: column;
    
    .left-panel,
    .right-panel {
      width: 100%;
      flex-direction: row;
      flex-wrap: wrap;
      height: auto;
    }
    
    .center-panel {
      order: -1;
      min-height: clamp(300px, 40vh, 600px);
    }
  }
  
  .panel-card {
    flex: 1;
    min-width: clamp(250px, 30vw, 350px);
  }
  
  .map-container {
    min-height: clamp(250px, 35vh, 450px);
  }
}

@media (max-width: 768px) {
  .energy-storage-dashboard {
    font-size: clamp(12px, 1.5vh, 14px);
  }
  
  .dashboard-header {
    flex-direction: column;
    text-align: center;
    gap: clamp(8px, 1vh, 15px);
    padding: clamp(8px, 2vh, 15px) clamp(10px, 3vw, 20px);
    min-height: clamp(80px, 15vh, 140px);
    
    .header-left {
      .main-title {
        font-size: clamp(1.2rem, 4vw, 2rem);
      }
      
      .subtitle {
        font-size: clamp(0.7rem, 2vw, 1rem);
      }
    }
  }
  
  .dashboard-content {
    height: calc(100vh - clamp(80px, 15vh, 140px));
    padding: clamp(3px, 0.8vh, 8px);
    gap: clamp(3px, 0.8vh, 8px);
    
    .left-panel,
    .right-panel {
      flex-direction: column;
      padding: clamp(3px, 0.8vh, 8px);
      gap: clamp(5px, 1vh, 10px);
    }
  }
  
  .panel-card {
    min-width: auto;
    padding: clamp(10px, 1.8vh, 16px);
  }
  
  .resource-overview .overview-stats {
    flex-direction: column;
    gap: clamp(6px, 1vh, 8px);
    
    .stat-item {
      min-width: auto;
      padding: clamp(10px, 2vh, 12px);
    }
  }
  
  .map-container {
    min-height: clamp(200px, 30vh, 350px);
  }
  
  .chart-container {
    height: clamp(100px, 18vh, 180px);
    min-height: clamp(80px, 15vh, 120px);
  }
  
  .core-operations .operations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 1.5vh, 12px);
    
    .operation-item {
      padding: clamp(15px, 2.5vh, 20px);
    }
  }
}

@media (max-width: 480px) {
  .energy-storage-dashboard {
    font-size: clamp(10px, 1.8vh, 12px);
  }
  
  .fullscreen-control {
    top: clamp(8px, 1.5vh, 15px);
    right: clamp(8px, 1.5vw, 15px);
  }
  
  .dashboard-header {
    min-height: clamp(70px, 18vh, 120px);
  }
  
  .dashboard-content {
    height: calc(100vh - clamp(70px, 18vh, 120px));
  }
  
  .panel-card .card-header {
    margin-bottom: clamp(8px, 1.2vh, 12px);
  }
  
  .map-container {
    min-height: clamp(150px, 25vh, 280px);
  }
  
  .core-operations .operations-grid {
    grid-template-columns: 1fr;
  }
  
  .market-overview .market-stats,
  .market-participation .participation-stats {
    flex-direction: column;
    gap: clamp(8px, 1.5vh, 10px);
  }
}

// 超小屏幕适配
@media (max-width: 375px) {
  .dashboard-header {
    min-height: clamp(60px, 20vh, 100px);
  }
  
  .dashboard-content {
    height: calc(100vh - clamp(60px, 20vh, 100px));
  }
  
  .chart-container {
    height: clamp(80px, 15vh, 140px);
    min-height: clamp(60px, 12vh, 100px);
  }
}

// 全屏模式特殊样式
:fullscreen {
  .energy-storage-dashboard {
    font-size: clamp(16px, 1.5vh, 24px);
  }
  
  .dashboard-header {
    min-height: clamp(80px, 10vh, 140px);
  }
  
  .dashboard-content {
    height: calc(100vh - clamp(80px, 10vh, 140px));
    
    // 全屏模式下确保关键内容区域始终可见
    .left-panel,
    .right-panel {
      .revenue-trend,
      .market-participation {
        min-height: clamp(220px, 28vh, 350px); // 全屏模式下更大的最小高度
      }
      
      .performance-evaluation {
        min-height: clamp(120px, 18vh, 250px);
      }
    }
  }
}

// 确保全屏模式下内容正确显示
.energy-storage-dashboard:fullscreen {
  background-image: url("@/assets/fullScreen/整体背景.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

// 处理浏览器全屏API的差异
:-webkit-full-screen {
  .energy-storage-dashboard {
    width: 100vw !important;
    height: 100vh !important;
    background-image: url("@/assets/fullScreen/整体背景.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }
}

:-moz-full-screen {
  .energy-storage-dashboard {
    width: 100vw !important;
    height: 100vh !important;
    background-image: url("@/assets/fullScreen/整体背景.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }
}

:-ms-fullscreen {
  .energy-storage-dashboard {
    width: 100vw !important;
    height: 100vh !important;
    background-image: url("@/assets/fullScreen/整体背景.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }
}

// 通用全屏模式支持
:fullscreen {
  .energy-storage-dashboard {
    background-image: url("@/assets/fullScreen/整体背景.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
  }
}

// 横屏模式适配
@media (max-height: 500px) and (orientation: landscape) {
  .dashboard-header {
    min-height: clamp(50px, 15vh, 80px);
    padding: clamp(5px, 2vh, 10px) clamp(10px, 3vw, 20px);
  }
  
  .dashboard-content {
    height: calc(100vh - clamp(50px, 15vh, 80px));
    flex-direction: row;
    
    .left-panel,
    .right-panel {
      width: clamp(200px, 25vw, 300px);
    }
  }
  
  .map-container {
    min-height: clamp(120px, 35vh, 250px);
  }
}

// 电量趋势图表样式
.electricity-trend {
  flex-shrink: 0;
  min-height: clamp(250px, 30vh, 350px);
  display: flex;
  flex-direction: column;
  
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(15px, 2vh, 20px);
    
    h3 {
      flex: 1;
    }
    
    .time-filter {
      margin-left: auto;
      
      .el-segmented {
        background: rgba(79, 149, 255, 0.1);
        border: 1px solid rgba(79, 149, 255, 0.3);
        
        .el-segmented-item {
          color: rgba(255, 255, 255, 0.8);
          font-size: clamp(0.7rem, 1vw, 0.9rem);
          padding: clamp(2px, 0.5vh, 4px) clamp(6px, 1vw, 10px);
          
          &.is-active {
            background: rgba(79, 149, 255, 0.3);
            color: #ffffff;
          }
        }
      }
    }
  }
  
  .chart-container {
    flex: 1;
    min-height: clamp(180px, 20vh, 250px);
  }
}

// 功率曲线图表样式
.power-curve {
  flex-shrink: 0;
  min-height: clamp(250px, 30vh, 350px);
  display: flex;
  flex-direction: column;
  
  .chart-container {
    flex: 1;
    min-height: clamp(180px, 20vh, 250px);
  }
}

// 告警管理表格样式
.alarm-management {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  
  .table-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(230, 162, 60, 0.2);
  }
  
  .table-scroll {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(230, 162, 60, 0.5) transparent;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(230, 162, 60, 0.5);
      border-radius: 3px;
      
      &:hover {
        background: rgba(230, 162, 60, 0.7);
      }
    }
  }
  
  .alarm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    
    thead {
      position: sticky;
      top: 0;
      z-index: 10;
      background: linear-gradient(135deg, rgba(230, 162, 60, 0.3), rgba(230, 162, 60, 0.2));
      backdrop-filter: blur(10px);
      
      th {
        padding: clamp(8px, 1vh, 12px) clamp(4px, 0.8vw, 8px);
        text-align: center;
        font-weight: 600;
        color: #ffffff;
        border-bottom: 2px solid rgba(230, 162, 60, 0.4);
        white-space: nowrap;
        text-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
      }
    }
    
    tbody {
      tr {
        border-bottom: 1px solid rgba(230, 162, 60, 0.1);
        transition: all 0.3s ease;
        
        &:nth-child(even) {
          background: rgba(230, 162, 60, 0.05);
        }
        
        &:hover {
          background: rgba(230, 162, 60, 0.15);
          transform: translateX(2px);
        }
        
        td {
          padding: clamp(6px, 0.8vh, 10px) clamp(4px, 0.8vw, 8px);
          text-align: center;
          color: rgba(255, 255, 255, 0.9);
          border-right: 1px solid rgba(230, 162, 60, 0.1);
          
          &:last-child {
            border-right: none;
          }
          
          &:nth-child(2) {
            color: #E6A23C;
            font-weight: 500;
          }
        }
      }
    }
  }
  
  // 响应式设计
  @media (max-width: 1200px) {
    .alarm-table {
      font-size: clamp(0.7rem, 1vw, 0.85rem);
      
      th, td {
        padding: clamp(6px, 0.8vh, 10px) clamp(3px, 0.6vw, 6px);
      }
    }
  }
  
  @media (max-width: 768px) {
    .alarm-table {
      font-size: clamp(0.65rem, 1.2vw, 0.8rem);
      
      th, td {
        padding: clamp(5px, 0.7vh, 8px) clamp(2px, 0.5vw, 4px);
      }
    }
  }
}
</style>